<template>
    <div class="Contributionlist">
        <div class="Contributionlist-title">
            <label>
                <span>礼物中心</span>
                <span style="width:0px;margin-top:4px;">></span>
                <span>平台收入榜</span>
            </label>
        </div>
        <div class="Contributionlist-nav">
            <ul>
                <li v-for="(item,index) in Periodoftime" :key="index" @click="SelectedChoose(index)" :class="Periodoftimeindex == index?'Choosesd':''">{{item}}</li>
            </ul>
        </div>
        <div class="Contributionlist-content">
            <ul>
                <li class="Contributionlist-list" v-for="(item,index) in Contributiontothelist" :key="index">
                    <label>
                        <img :src="item.map.payinfo.avatar" alt="">
                    </label>
                    <label class="Contributionlist-info">
                        <span>{{item.map.payinfo.nick_name}}</span>
                        <span>累计贡献: {{item.pay_count}}猫币</span>
                    </label>
                </li>
            </ul>
            <div class="Lvie-cl-de-con-pagination">
                <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total="1000"></el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'Contributionlist',
    data(){
        return{
            Periodoftime:['周榜','月榜','总榜'],
            Periodoftimeindex:0,
            Contributiontothelist:[],
            currentPage:1
        }
    },
    created(){
        this.GetPeridofti()
    },
    methods:{
        SelectedChoose(e){
            this.Periodoftimeindex =e
        },
        GetPeridofti(){
            var data = {
                currentPage:this.currentPage,
                pageSize:20,
            }
            this.$axios({
                method:'get',
                url:'http://101.37.66.151:8768/eg-api/user/userOrder/queryPaymentRankingListPage',
                params:data,
            }).then((res) =>{
                console.log(res.data.data,'平台贡献榜')
                this.Contributiontothelist = res.data.data
            }).catch((error) =>{
                console.log(error)
            })
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.GetPeridofti()
        },
    }
}
</script>
<style lang="less" scoped>
    .Contributionlist{
        position: relative;
        width: 100%;
        background: #ffffff;
        border-radius: 20px;
    }
    .Contributionlist-title{
        position: relative;
        width: 90%;
        height: 74px;
        margin: 0 auto;
        border-bottom: #47CECF 1px solid;
        display: flex;
        align-items: center;
        label{
            display: flex;
            width: 100%;
            border-left: 14px solid #2DC7C8;
            span{
                color: #2DC7C8;
                font-size: 20px;
                font-weight: bold;
                width: 12%;
                text-align: center;
                &:first-child{
                    cursor: pointer;
                }
            }
        }
        
    }
    .Contributionlist-nav{
        position: relative;
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 80px;
        ul{
            position: relative;
            width: 40%;
            margin: 0 auto;
            padding: 0;
            height: 50px;
            display: flex;
            list-style: none;
            align-items: center;
            border:1px solid rgba(71,206,207,1);
            border-radius:22px;
            li{
                width: 33.3333%;
                height: 50px;
                border-radius:22px;
                line-height: 50px;
                text-align: center;
                color: #47CECF;
                font-size: 16px;
                cursor: pointer;
            }
        }
    }
    .Choosesd{
        background: #47CECF;
        color: #FFFFFF!important;
    }

    .Contributionlist-content{
        position: relative;
        width: 80%;
        margin: 0 auto;
        ul{
            padding: 0;
            list-style: none;
            display: flex;
            height: auto;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            li{
                width: 100%;
                height: 60px;
                border-bottom:1px solid rgba(233,233,233,1);
                display: flex;
                align-items: center;
            }
        }
    }
    .Contributionlist-list{
        label{
            width: 60%;
            span{
                display: inline-block;
                width: 100%;
            }
        }
    }
    .Contributionlist-list>label:first-child{
        width: 10%;
        text-align: center;
        img{
            width: 42px;
            height: 42px;
            background: #eeeeee;
            border-radius: 20px;
        }
    }
    .Contributionlist-info{
        span{
            &:first-child{
                color: #484848;
                font-size: 16px;
                font-weight: bold;
            }
            &:last-child{
                color: #C2C2C2;
                font-size: 14px;
            }
        }
    }
    .Lvie-cl-de-con-pagination{
        position: relative;
        width: 100%;
        height: 100px;
        margin-top: 100px;
        margin-bottom: 40px;
        display: flex;
        justify-content: flex-end;
        margin-right: 100px;
    }
</style>